.food-moment {
  display: flex;
  flex-direction: column;
  gap: 10px;

  .moment-list {
    display: flex;
    flex-direction: column;
    gap: 10px;

    .moment-card {
      padding: 10px;

      display: grid;
      grid-template-columns: 35px 1fr;
      gap: 5px;

      .moment-content {
        display: flex;
        flex-direction: column;
        gap: 10px;

        p {
          margin: 0;
        }

        .username {
          font-weight: bold;
          font-size: larger;
        }

        .moment-image-list {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 10px;
        }

        .button-container {
          display: flex;
          gap: 20px;
        }

        .moment-comment {
          display: grid;
          grid-template-columns: 1fr 40px 60px;
          justify-items: center;
          gap: 5px;
        }

        .moment-comment-list {
          padding: 10px;
          background-color: var(--color-comment-bg);

          display: flex;
          flex-direction: column;
          gap: 5px;

          .moment-comment-item {
            .name {
              font-weight: bold;
            }
          }
        }
      }
    }
  }
}
